<template>
  <div id="cart">
    <!-- 导航 -->
    <Nav-Bar class="cart-navbar">
       <div slot="left" class="cart_left">
         <div class="cart_titleGuWu">购物车</div>
         <div class="cart_GouWuShu">共 {{ cartLength }} 件 宝 贝</div>    
       </div>
    </Nav-Bar>
    <!-- 可滚动区域 -->
    <Scroll class="cart-content" ref="scrolldata">
    <!-- 商品列表 -->
    <Cart-List/>
    </Scroll>
    <!-- 底部汇总 -->
    <Cart-Bottom-Bar/>
  </div>
</template>

<script>
//   components/common/
import Scroll from 'components/common/scroll/Scroll'
import NavBar from 'components/common/navbar/NavBar'

//   ./childComps/
import CartList from './childComps/CartList'
import CartBottomBar from './childComps/CartBottomBar'

//   vuex
import { mapGetters } from 'vuex'

//  mixin 混入
import { itemListenerMixin } from 'common/mixin'
export default {
    name:'Cart',
    components:{
       NavBar,
       CartList,
       Scroll,
       CartBottomBar
    },
    mixins:[
      itemListenerMixin
    ],
    computed: {
      // 替换 计算属性
       ...mapGetters(['cartLength', 'cartList'])
    },
    //  离开组件时监听
      deactivated() {
   //   取消全局事件的监听
      this.$bus.$off('itemImagesLoad', this.itemImgListener)
    },
      activated() {
      // 下拉刷新, 重新计算可滚动区域高度
       this.$refs.scrolldata.refresh()
    }
}
</script>

<style>
#cart{
  background-color: #e4e4e47a;
}
.cart-content{
 position: absolute;
 top: 85px;
 bottom: 103px;
 left: 0;
 right: 0;
 overflow: hidden;
 background-color: #e4e4e47a;
}
.cart-navbar{
  box-sizing: border-box;
  height: 85px;
  /* background-color: #e4e4e469; */
  color: #fff;
}
.cart-navbar .cart_left{
  display: flex;
  flex-direction:column;
  line-height: 30px;
  width: 110px;
  color: #000c;
}
.cart-navbar .cart_titleGuWu{
  font-size: 25px;
  padding: 20px 0 5px 0;
  flex: 1;

}
.cart-navbar .cart_GouWuShu{
  font-size: 12px;
  color: #666
}

</style>